<!--
 * @Author: Leng
 * @Date: 2021-02-05 17:06:24
 * @Description: 发票信息
 * @FilePath: \vue-leng\src\components\module\InvoiceItem.vue
-->


<template>
<div class="invoiceContent">

  <div class="easyContent" v-if="type == 'easy'">
    <div class="invoice-Item">
      <span class="label">发票信息</span>
      <span class="tip-text" v-text="tipText"></span>
    </div>
  </div>

    <!-- 卡片样式 -->
    <div class="cardContent" v-else>
      <p class="tip-tit"><i></i>温馨提示</p>
      <div class="next">
        <span class="label">发票信息</span>
        <span class="tip-text" v-text="tipText"></span>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'InvoiceItem',
  props: {
    printStatus: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'easy'
    }
  },
  computed: {
    tipText () {
      if (this.printStatus) {
        return '无需换取纸制车票，行程结束后，报销凭证会统一向贵单位提供'
      }
      return '如需报销，请在乘车前凭乘客有效证件，前往火车站换取纸制车票'
    }
  }
}
</script>

<style lang="scss" scoped>
.invoiceContent{

// 简约格式
.easyContent {
  padding: .6rem;
  background: #fff;
  box-shadow: 0rem 0.2rem 0.9rem -0.05rem rgba(120,154,187,0.3);
  .invoice-Item {
    margin: .4rem 0;
    display: flex;
    align-items: flex-start;

    .label {
      font-size: .8rem;
      font-weight: bold;
      color: #333;
      width: 4rem;
      flex-shrink: 0;
    }

    .tip-text {
      width: 100%;
      color: #333;
      font-size: 0.7rem;
      line-height: 1.1rem;
    }
  }
  }
  // 卡片格式
  .cardContent {
    position: relative;
    border-radius: .2rem;
    margin: .6rem;
    padding: .4rem 1.2rem;
    background-color: #fff;
    box-shadow: 0rem 0.2rem 0.9rem -0.05rem rgba(120,154,187,0.3);
    .tip-tit {
      color: #000;
      font-weight: 400;
      text-align: left;
      padding-bottom: .4rem;
      border-bottom: 1px dashed #e5e5e5;
      i {
        width: 0.1rem;
        height: 0.6rem;
        display: inline-block;
        margin-right: 0.4rem;
        background-color: #F08300;
      }
    }
     &::before {
      content: '';
      position: absolute;
      top: 1.2rem;
      left: -0.2rem;
      width: 0.5rem;
      height: 0.8rem;
      background: #f9fafc;
      border-radius: 50%;
      box-shadow: 0 0.2rem 0.9rem -1px rgba(120, 154, 187, 0.1) inset;
    }
    &::after {
      content: '';
      position: absolute;
      top: 1.2rem;
      right: -0.2rem;
      width: 0.5rem;
      height: 0.8rem;
      background: #f9fafc;
      border-radius: 50%;
      box-shadow: 0 0.2rem 0.9rem -1px rgba(120, 154, 187, 0.1) inset;
    }
  .next {
    padding-bottom: .35rem;
    display: flex;
    .label {
      font-size: .7rem;
      font-weight: bold;
      color: rgba(0,0,0, 0.45);
      width: 3.5rem;
      flex-shrink: 0;
    }

    .tip-text {
      width: 100%;
      color: rgba(0,0,0, 0.80);
      font-size: 0.7rem;
      text-align: left;
    }
  }
}
}
</style>
